<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--<link rel="stylesheet" type="text/css" href="../css/base.css"/>-->
		<link rel="stylesheet" type="text/css" href="css/font.css" />
		<style type="text/css">
			.container {
				width: 842px;
				padding-top: 200px;
				height: 400px;
				margin: 0 auto;
				background-image: url(img/201987-16100Q5530120.jpg);
				background-size: 842px, 600px;
			}
			
			.music-contain {
				height: 200px;
				text-align: center;
			}
			
			.music-contain ol {
				font-size: 16px;
				list-style-type: none;
			}
			
			.music-contain ol li {
				width: 150px;
				margin: 0 auto;
				text-align: left;
				line-height: 30px;
				cursor: pointer;
			}
			
			.play {
				height: 20px;
				margin-top: 80px;
			}
			
			.playjindu {
				width: 600px;
				height: 12px;
				margin: 0 auto;
				background-color: rgba(0, 0, 0, 0.7);
				border-radius: 5px;
			}
			
			.musicplay {
				width: 0px;
				height: 12px;
				background-color: #5FB878;
				border-radius: 5px;
			}
			
			.btn {
				width: 20px;
				height: 20px;
				border: 1px solid #CC0031;
				float: right;
				margin-left: 15px;
				margin-top: -5px;
				background-color: white;
				border-radius: 50px;
			}
			
			#shichang {
				float: right;
				margin-right: 130px;
			}
			
			.caozuo {
				width: 300px;
				clear: both;
				float: right;
				margin-right: 250px;
			}
			
			.caozuo span {
				display: inline-block;
				width: 30px;
				height: 30px;
				margin-right: 30px;
				margin-top: -20px;
			}
			
			i.iconfont {
				font-size: 38px;
			}
			
			.display {
				display: none;
			}
		</style>
	</head>

	<body>
		<audio src="MP3/1.mp3" id="automp3"></audio>
		<div class="container">
			<div class="music-contain">
				<ol>
					<li data="MP3/1.mp3">1.你猜我猜不猜</li>
					<li data="MP3/2.mp3">2.远走高飞</li>
					<li data="MP3/3.mp3">3.打上花火</li>
					<!--<li>4.你不孤单</li>-->
				</ol>
			</div>
			<div class="play">
				<div class="playjindu">
					<div class="musicplay">
						<div class="btn">

						</div>
					</div>
				</div>
			</div>
			<div id="shichang">
				00:00/00:00
			</div>
			<div class="caozuo">
				<span></span><span class="prev"><i class="iconfont icon-yingyongtubiaohoutui"></i></span><span class="zanting"><i class="iconfont icon-tubiao-"></i><i class="iconfont icon-shangchuan08  display"></i></span><span class="next"><i class="iconfont icon-yingyongtubiaokuaijin"></i></span>
			</div>
		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var audiomp3 = document.getElementById("automp3");
				var fen = 0,
					miao = 0;
				var bool = false;
				var jdtWidth = 0;
				audiomp3.oncanplay = function() {
					$("#shichang").html("00:00" + "/" + getTime(audiomp3.duration));
				}
				audiomp3.ontimeupdate = function() {
					uptime = Math.round(audiomp3.currentTime);
					$("#shichang").html(getTime(audiomp3.currentTime) + "/" + getTime(audiomp3.duration));
					var width = (audiomp3.currentTime / audiomp3.duration) * 600 + "px";
					$(".musicplay").css("width", width);

				}

				function getTime(showtime) {
					var miao = Math.round(showtime) % 60;
					var fen = Math.round(showtime - miao) / 60;
					return fen + ":" + miao;
				};
				$(".btn").mousedown(function(event) {
					bool = true;
					btnleft = event.clientX;
					jdtWidth = parseInt($(".jindutiao").css("width"));

				});
				$(".playjindu").mousemove(function(event) {
					if(bool) {
						bgleft = event.clientX;
						left = bgleft - btnleft + jdtWidth;
						if(left <= 400) {
							$(".jindutiao").css("width", left + "px");
							var ctime = parseInt(left / 600 * audiomp3.duration);
							audiomp3.currentTime = ctime;
							getTime(ctime);
							("#shichang").html(getTime(ctime) + "/" + getTime(audiomp3.duration));
						}

					}

				}).mouseout(function(event) {
					bool = false;

				});
				var stop = $(".icon-tubiao-");
				var start = $(".icon-shangchuan08");
				$(".zanting").click(function() {

					if(stop.css("display") == "none") {
						audiomp3.pause();
						start.addClass("display");
						stop.removeClass("display");
					} else {
						audiomp3.play();
						start.removeClass("display");
						stop.addClass("display");
					}

				});
				var index = 0;
				$(".music-contain li").each(function(k, v) {
					v.setAttribute("index", k);
				});
				$(".music-contain li").click(function() {
					index = this.getAttribute("index");
					audiomp3.src = this.getAttribute("data");
					start.removeClass("display");
					stop.addClass("display");
					audiomp3.play();
				});
				$(".prev").click(function() {
					index--;
					if(index<0){
						index=2;
					}
					$(".music-contain li").each(function(k, v) {
						if(v.getAttribute("index") == index) {
							audiomp3.src = v.getAttribute("data");
							start.removeClass("display");
							stop.addClass("display");
							audiomp3.play();
						}
					})
				});
				$(".next").click(function() {
					index++;
					if(index>2){
						index=0;
					}
					$(".music-contain li").each(function(k, v) {
						if(v.getAttribute("index") == index) {
							audiomp3.src = v.getAttribute("data");
							start.removeClass("display");
							stop.addClass("display");
							audiomp3.play();
						}
					})
				});
				
			})
		</script>
	</body>

</html>